<!-- 
*   @Description:二次封装ElementUI的upload上传组件
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="UploadTemplateBox">
    <el-upload
      class="upload-demo"
      :action="action"
      :multiple="multiple"
      :limit="limit"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handlerProgress"
      :on-change="handlerChange"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :auto-upload="autoUpload"
      :drag="drag"
      :http-request="httpRequest"
    >
      <el-button>
        上传图片<i class="el-icon-upload el-icon--right"></i>
      </el-button>
      <span slot="tip">
        <span class="UPLOADSPAN">
          注：支持只能上传jpg/png文件，单个文件最大不超过500kb
        </span>
      </span>
    </el-upload>
    <!-- <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  name: "UploadTemplate",
  props: {
    //必选参数，上传的地址
    action: {
      typeof: String,
      default: "",
    },
    //是否支持多选文件
    multiple: {
      typeof: Boolean,
      default: false,
    },
    //最大允许上传个数
    limit: {
      typeof: Number,
      default: 1,
    },
    //是否选取文件后立刻上传
    autoUpload: {
      typeof: Boolean,
      default: true,
    },
    //是否支持拖拽上传
    drag: {
      typeof: Boolean,
      default: false,
    },
    //赋值
    fileList: {
      typeof: Array,
      default: [],
    },
  },
  data() {
    return {
      // fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {

    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log("文件列表移除文件时的钩子");
      console.log(file);
      console.log(fileList);
      this.$emit("handleRemove", file, fileList);
    },
    //文件上传成功的钩子
    handleSuccess(response, file, fileList) {
      console.log("文件上传成功的钩子");
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.$emit("handleSuccess", response, file, fileList);
    },
    //文件上传时的钩子
    handlerProgress(event, file, fileList) {
      console.log("文件上传时的钩子");
      console.log(event, file, fileList);
      this.$emit("handlerProgress", event, file, fileList);
    },
    //点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log("点击文件列表中已上传的文件时的钩子", file);
      this.dialogVisible = true
      this.dialogImageUrl = file.url;
      this.$emit("handlePreview", file);
    },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handlerChange(file, fileList) {
      console.log(
        "文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用"
      );
      console.log(file);
      console.log(fileList);
      this.$emit("handlerChange", file, fileList);
    },
    //文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      console.log("文件超出个数限制时的钩子");
      console.log(files, fileList);
      this.$emit("handleExceed", files, fileList);
    },
    //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除
    beforeRemove(file, fileList) {
      console.log(
        "删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除"
      );
      console.log(file, fileList);
      this.$emit("beforeRemove", file, fileList);
    },
    //上传失败的钩子
    handleError(err, file, fileList) {
      console.log("上传失败的钩子");
      console.log(err, file, fileList);
      this.$emit("handleError", err, file, fileList);
    },
    //自定义上传事件
    httpRequest(params){
      console.log("自定义上传事件")
      console.log(params)

    }
  },
};
</script>

<style scoped lang="less"></style>
